<template>
  <div class="search-container">
    <el-form :inline="true" :model="form" class="form-inline" size="small" @submit.native.prevent>
      <template v-for="(val, name) in searchConfig">
        <el-form-item :key="name" :label="val.label">
          <!-- 文本输入框 -->
          <el-input
            v-if="val.type === 'input'"
            v-model="form[name]"
            :placeholder="val.placeholder || '请输入' + val.label"
            @keyup.enter.native="onSubmit"
          />
          <!-- 下拉选择框 -->
          <el-select
            v-if="val.type === 'select'"
            v-model="form[name]"
            :placeholder="val.placeholder || '请选择' + val.label"
          >
            <el-option
              v-for="item in val.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 日期范围、日期时间范围选择器 -->
          <el-date-picker
            v-if="val.type === 'daterange' || val.type === 'datetimerange'"
            v-model="form[name]"
            :type="val.type"
            :value-format="val.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleChooseDate($event, val)"
          />
          <!-- 级联选择器 -->
          <el-cascader
            v-if="val.type==='cascader'"
            v-model="form[name]"
            :placeholder="val.placeholder || '请选择' + val.label"
            :props="val.props"
            :options="val.options"
            :clearable="val.clearable"
            :show-all-levels="val.showAllLevels"
            :collapse-tags="val.collapseTags"
            :filterable="val.filterable"
          />
        </el-form-item>
      </template>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="onSubmit"
        >查询</el-button>
        <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    searchConfig: {
      required: true,
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {},
      // 最终提交时，需要剔除的字段名
      rangeKeys: []
    }
  },
  watch: {
    searchConfig: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (!newVal) return
        const keys = Object.keys(newVal)
        if (!(Array.isArray(keys) && keys.length > 0)) return
        keys.forEach((val) => {
          const { type, fields } = newVal[val]
          if (
            Array.isArray(fields) &&
            fields.length >= 2 &&
            (type === 'daterange' || type === 'datetimerange')
          ) {
            this.rangeKeys.push(val)
          }
          const defaultVal = this.searchConfig[val].defaultValue
          this.$set(this.form, val, defaultVal === undefined ? '' : defaultVal)
        })
        this.defaultConfig = JSON.parse(JSON.stringify(this.form))
      }
    }
  },

  methods: {
    // 选择日期或者日期时间范围
    handleChooseDate(event, config) {
      const { fields } = config
      if (Array.isArray(fields) && fields.length === 2) {
        const [start = '', end = ''] = event || []
        const [key1, key2] = fields
        this.form[key1] = start
        this.form[key2] = end
      }
    },
    onSubmit() {
      const form = {}
      // 移除日期范围、日期时间范围等数组类型的值
      for (const k in this.form) {
        if (this.form.hasOwnProperty(k)) {
          const val = this.form[k]
          if (!this.rangeKeys.includes(k)) {
            form[k] = val
          }
        }
      }
      this.$emit('onSubmit', form)
      console.log('submit!')
    },
    onReset() {
      this.form = Object.assign({}, this.defaultConfig)
      this.$emit('onSubmit', { type: 'reset', ...this.defaultConfig })
    }
  }
}
</script>

<style scoped lang="scss">
.form-inline {
  margin-top: 22px;
}
</style>
